<template>
  <view>
    <view class="container">
      <view 
        v-for="(item, index) in events" 
        :key="index" 
        class="event-item"
        :class="{'fade-in': index >= 0}"
        @touchstart="handleTouchStart(item, index)" 
        @touchend="handleTouchEnd(item, index)"
      >
        <text class="title">{{ item.content }}</text>
        <text class="days">已经
          <text class="highlight">{{ item.days }}</text>天
        </text>
        <view class="sub-info">
          <text class="date">{{ item.time }}</text>
        </view>
      </view>
    </view>

    <view class="button-sp-area">
      <view class="mini-btn" @touchstart="handleTouchStart" @touchend="handleTouchEnd" @click="goToNextPage">+</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      events: [],  // 存放从云数据库中获取的事件
      buttonActive: false,
      pressTimers: {}, // 存放每个事件的定时器ID，避免重叠
      pressedItems: new Set(), // 用来记录已经触发长按事件的项
    };
  },
  methods: {
    // 获取云数据库中的纪念数据
    async getCommemorationData() {
      try {
        const res = await uniCloud.callFunction({
          name: 'getCommemorationData'  // 云函数的名字
        });
        if (res.result && res.result.length) {
          this.events = res.result.map(item => {
            // 计算每个事件的初始天数
            item.days = this.calculateDays(item.time);
            return item;
          });
        }
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    },

    // 计算天数差
    calculateDays(time) {
      const eventDate = new Date(time);
      const today = new Date();
      const diffTime = today - eventDate; // 计算时间差
      const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));  // 转换为天数
      return diffDays >= 0 ? diffDays : 0;  // 防止负数
    },

    // 处理长按事件
    handleTouchStart(item, index) {
      // 如果已经处理过长按，则不再触发
      if (this.pressedItems.has(index)) return;

      // 先清除上一次的定时器，防止多次触发
      if (this.pressTimers[index]) {
        clearTimeout(this.pressTimers[index]);
      }
      
      // 设置新的定时器
      this.pressTimers[index] = setTimeout(() => {
        this.pressedItems.add(index);  // 记录该项已经长按过
        this.handleLongPress(item);
      }, 500);  // 设置500毫秒为长按时间
    },

    handleTouchEnd(item, index) {
      // 清除定时器
      if (this.pressTimers[index]) {
        clearTimeout(this.pressTimers[index]);
        delete this.pressTimers[index]; // 清理定时器ID
      }
    },

    handleLongPress(item) {
      // 长按跳转到编辑页面
      uni.navigateTo({
        url: `/pages/edit/index?id=${item._id}` // 假设使用 _id 作为事件标识符
      });
    },

    goToNextPage() {
      uni.navigateTo({
        url: '/pages/add/index',
      });
    },

    // 更新天数
    updateDays() {
      const now = new Date();
      // 检查当前时间是否已经过了24点，如果过了则更新天数
      this.events.forEach(event => {
        const eventDate = new Date(event.time);
        const days = this.calculateDays(event.time);  // 计算当前天数
        if (days > event.days) {
          event.days = days;  // 更新天数
        }
      });
    },

    // 设置定时更新，每隔一段时间检查
    setDailyUpdate() {
      // 每隔 10 分钟检查一次
      setInterval(() => {
        this.updateDays();  // 每次检查后更新天数
      }, 600000);  // 600000ms = 10分钟
    }
  },
  // 页面加载时，获取数据
  mounted() {
    this.getCommemorationData();  // 加载数据
    this.setDailyUpdate(); // 设置定时更新
  }
}
</script>


  
  <style scoped>
  .container {
	padding: 20px;
	background-color: #f8e1f4; /* 粉色背景，营造浪漫氛围 */
  }
  
  .event-item {
	margin-bottom: 20px;
	padding: 15px;
	background-color: #ffffff;
	border-radius: 12px;
	box-shadow: 10px 10px 12px rgba(59, 15, 15, 0.1);
	opacity: 0;
	animation: fadeIn 1s ease-in forwards; /* 为每个事件添加淡入动画 */
  }
  
  .event-item:hover {
	transform: scale(1.05); /* 悬停时放大 */
	box-shadow: 12px 12px 16px rgba(59, 15, 15, 0.2); /* 悬停时卡片阴影效果 */
  }
  
  .title {
	font-size: 20px;
	font-weight: bold;
	color: #000000; 
	margin-bottom: 8px;
  }
  
  .sub-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
  }
  
  .date {
	font-size: 14px;
	color: #423c41;
  }
  
  .days {
	font-size: 16px;
	color: #000000;
	font-weight: bold;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-right: 10px;
  }
  
  .highlight {
	color: #f447ba; /* 明亮的粉色，突出显示 */
	font-size: 24px;
  }
  
  .button-sp-area {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
  }
  
  .mini-btn {
	width: 70px;
	height: 70px;
	border-radius: 35px;
	font-size: 50px;
	background: linear-gradient(to bottom, #d3096e, #ff6fcf); /* 浪漫的渐变色 */
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.1s ease, background-color 0.2s ease; /* 添加平滑过渡效果 */
	animation: pulse 2s infinite; /* 按钮的脉动动画 */
  }
  
  .mini-btn:active {
	transform: scale(0.9); /* 点击时按钮缩小 */
	background-color: #ff4676; /* 按钮按下时的颜色变化 */
  }
  
  .mini-btn.active {
	transform: scale(0.9); /* 触发时动画 */
	background-color: #ff4676; /* 按下后的颜色变化 */
  }
  
  @keyframes fadeIn {
	0% {
	  opacity: 0;
	  transform: translateY(10px); /* 初始时稍微下移 */
	}
	100% {
	  opacity: 1;
	  transform: translateY(0); /* 结束时恢复原位 */
	}
  }
  
  @keyframes pulse {
	0% {
	  transform: scale(1);
	}
	50% {
	  transform: scale(1.1);
	}
	100% {
	  transform: scale(1);
	}
  }
  
  @media (max-width: 768px) {
	.container {
	  padding: 15px;
	}
  
	.event-item {
	  padding: 12px;
	}
  
	.mini-btn {
	  width: 60px;
	  height: 60px;
	  font-size: 28px;
	}
  }
  </style>
  